<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 引入标签库 -->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>员工列表</title>
<!-- 
	web获取项目路径，资源引入都使用绝对路径
	request.getContextPath()获取到的值为：http://localhost:8080/ZHGL(项目名称),没有斜线。
	将此路径设置在pageContext域中的属性，通过EL表达式获取路径的值
	此路径等同于webapp这一层
 -->

<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<!-- 引入jQuery js文件 -->
<script type="text/javascript"
	src="${APP_PATH }/static/js/jquery-1.12.4.min.js"></script>
<!-- 引入Bootstrap样式 -->
<link
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<!-- 引入Bootstrap js文件 -->
<script
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>

	<!-- 员工修改的模态框 Modal -->
	<div class="modal fade" id="empUpdateModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">员工修改</h4>
	      </div>
	      <div class="modal-body">
				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">empName</label>
						<div class="col-sm-10">
							<p class="form-control-static" id="empName_update_input">email@example.com</p>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">email</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="email_update_input" name="email" placeholder="Email">
							<span id="helpBlock2" class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">gender</label>
						<div class="col-sm-10">
							<label class="radio-inline">
							  <input type="radio" name="gender" id="gender1_update_input" value="M" checked="checked"> 男
							</label>
							<label class="radio-inline">
							  <input type="radio" name="gender" id="gender2_update_input" value="F"> 女
							</label>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">deptName</label>
						<div class="col-sm-4">
							<select class="form-control" name=dId id="dept_update_select">
							  <option>1</option>
							  <option>2</option>
							  <option>3</option>
							  <option>4</option>
							  <option>5</option>
							</select>
						</div>
					</div>
				</form>
			</div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="emp_update_btn">更新</button>
	      </div>
	    </div>
	  </div>
	</div>

	<!-- 员工添加的模态框 Modal -->
	<div class="modal fade" id="empAddModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
	  <div class="modal-dialog" role="document">
	    <div class="modal-content">
	      <div class="modal-header">
	        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
	        <h4 class="modal-title" id="myModalLabel">员工添加</h4>
	      </div>
	      <div class="modal-body">
				<form class="form-horizontal">
					<div class="form-group">
						<label class="col-sm-2 control-label">empName</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="empName_add_input" name="empName" placeholder="empName">
							<span id="helpBlock2" class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">email</label>
						<div class="col-sm-10">
							<input type="text" class="form-control" id="email_add_input" name="email" placeholder="Email">
							<span id="helpBlock2" class="help-block"></span>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">gender</label>
						<div class="col-sm-10">
							<label class="radio-inline">
							  <input type="radio" name="gender" id="gender1_add_input" value="M" checked="checked"> 男
							</label>
							<label class="radio-inline">
							  <input type="radio" name="gender" id="gender2_add_input" value="F"> 女
							</label>
						</div>
					</div>
					<div class="form-group">
						<label class="col-sm-2 control-label">deptName</label>
						<div class="col-sm-4">
							<select class="form-control" name=dId id="dept_add_select">
							  <option>1</option>
							  <option>2</option>
							  <option>3</option>
							  <option>4</option>
							  <option>5</option>
							</select>
						</div>
					</div>
				</form>
			</div>
	      <div class="modal-footer">
	        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
	        <button type="button" class="btn btn-primary" id="emp_save_btn">保存</button>
	      </div>
	    </div>
	  </div>
	</div>

	<div class="container">
		<!-- 标题行 -->
		<div class="row">
			<div class="col-md-12">
				<h1>
					<p class="text-center">中保信综合管理系统-CIITC</p>
				</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button type="button" class="btn btn-primary" id="emp_add_modal_btn">新增</button>
				<button type="button" class="btn btn-danger" id="emp_delete_all_btn">全部删除</button>
				<a href="${APP_PATH }/toImport"></a><!-- 可以通过a标签跳转  也可以同ajax window.location.href=uri跳转 -->
				<button type="button" class="btn btn-info" id="emp_import_btn">导入(Import)</button>
				<a href="${APP_PATH }/export">
					<button type="button" class="btn btn-info" id="emp_import_btn">导出(export)</button>
				</a>
			</div>
		</div>
		<!-- 数据表格 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-bordered table-hover" id="emps_table">
					<thead>
						<tr>
							<td>
								<label>
									<input type="checkbox" id="check_all" value="全选"/>全选
								</label>
							</td>
							<td>编号</td>
							<td>姓名</td>
							<td>性别</td>
							<td>邮箱</td>
							<td>部门编号</td>
							<td>操作</td>
						</tr>
					</thead>

					<tbody>

					</tbody>

					<!-- <tr>
						<td>1</td>
						<td>a</td>
						<td>男</td>
						<td>ciitc.com</td>
						<td>1</td>
						<td>
							<button type="button" class="btn btn-primary btn-sm">
								<span class="glyphicon glyphicon glyphicon-pencil"
									aria-hidden="true"></span> 编辑
							</button>
							<button type="button" class="btn btn-danger btn-sm">
								<span class="glyphicon glyphicon glyphicon-trash"
									aria-hidden="true"></span> 删除(del)
							</button>
						</td>
					</tr> -->
				</table>
			</div>
		</div>
		<!-- 分页信息 -->
		<div class="row">
			<!-- 分页文字描述信息 -->
			<div class="col-md-6" id="page_info_area"></div>

			<!-- 分页条信息 -->
			<div class="col-md-6" id="page_nav_area"></div>
		</div>
	</div>

	<script type="text/javascript">
	
		var totalRecord,currentPage;
		//页面加载完成以后直接发送一个ajax请求  渲染页面
		$(function() {
			to_page(1);
		});
		
		function to_page(pn){
			$.ajax({
				url : "${APP_PATH}/emps.do",
				data : "pn="+pn,
				type : "GET",
				success : function(result) {
					
					/* 解析员工数据的方法  */
					build_emps_table(result);
					/* 解析分页信息的方法  */
					build_page_info(result);
					/* 解析分页条信息的方法  */
					build_page_nav(result);
					
				}
			});
		}

		/* 解析并显示员工数据方法 */
		function build_emps_table(result) {
			/* 清空之前的信息  */
			$("#emps_table tbody").empty();
			/* 获取返回的json中的员工信息  */
			var emps = result.extend.pageInfo.list;
			$.each(emps, function(index, item) {
				var checkBoxTd = $("<td><input type='checkbox' class='check_item'/></td>");
				var empIdTd = $("<td></td>").append(item.empId);
				var empNameTd = $("<td></td>").append(item.empName);
				var genderTd = $("<td></td>").append(item.gender == 'M' ? "男" : "女");
				var emailTd = $("<td></td>").append(item.email);
				var deptNameTd = $("<td></td>").append(item.department.deptName);
				/* <td>
								<button type="button" class="btn btn-primary btn-sm">
									<span class="glyphicon glyphicon glyphicon-pencil"
										aria-hidden="true"></span> 编辑
								</button>
								<button type="button" class="btn btn-danger btn-sm">
									<span class="glyphicon glyphicon glyphicon-trash"
										aria-hidden="true"></span> 删除(del)
								</button>
							</td> */
				var editBtn = $("<button></button>").addClass("btn btn-primary btn-sm edit_btn")
								.append($("<span></span>").addClass("glyphicon glyphicon glyphicon-pencil"))
								.append("编辑");
				/* 给编辑按钮添加自定义属性 以便在后续使用按钮是快速定位  */
				editBtn.attr("edit-id",item.empId);
				
				var delBtn = $("<button></button>").addClass("btn btn-danger btn-sm delete_btn")
								.append($("<span></span>").addClass("glyphicon glyphicon glyphicon-trash"))
								.append("删除");
				/* 给删除按钮添加自定义属性 以便在后续使用按钮是快速定位 */
				delBtn.attr("del-id",item.empId);
				var butTd = $("<td></td>").append(editBtn).append(" ").append(delBtn);

				$("<tr></tr>").append(checkBoxTd)
							  .append(empIdTd)
							  .append(empNameTd)
							  .append(genderTd)
							  .append(emailTd)
							  .append(deptNameTd)
							  .append(butTd)
							  .appendTo("#emps_table tbody");
			});

		}

		/* 解析并显示分页信息的方法 */
		function build_page_info(result) {
			/* 清空之前的信息  */
			$("#page_info_area").empty();
			$("#page_info_area").append("当前第 "+result.extend.pageInfo.pageNum+"页,共"+
					result.extend.pageInfo.pages+" 页,共"+result.extend.pageInfo.total+" 条记录");
			totalRecord = result.extend.pageInfo.total;
			currentPage = result.extend.pageInfo.pageNum;
		}
		
		/* 显示分页条信息  */
		function build_page_nav(result) {
			/* 清空之前的信息  */
			$("#page_nav_area").empty();
			var ul = $("<ul></ul>").addClass("pagination");
			var firstPageLi = $("<li></li>").append($("<a></a>").append("首页").attr("href","#"));
			/* 上一页  */
			var prePageLi = $("<li></li>").append($("<a></a>").append("&laquo;"));
			if(result.extend.pageInfo.hasPreviousPage == false){
				firstPageLi.addClass("disabled");
				prePageLi.addClass("disabled");
			}else{
				firstPageLi.click(function(){
					to_page(1);
				});
				prePageLi.click(function(){
					/* 点击跳转前一页 */
					to_page(result.extend.pageInfo.prePage);
				});
			}
			/* 下一页  */
			var nextPageLi = $("<li></li>").append($("<a></a>").append("&raquo;"));
			var lastPageLi = $("<li></li>").append($("<a></a>").append("末页").attr("href","#"));
			if(result.extend.pageInfo.hasNextPage == false){
				nextPageLi.addClass("disabled");
				lastPageLi.addClass("disabled");
			}else{
				nextPageLi.click(function(){
					to_page(result.extend.pageInfo.nextPage);
				});
				lastPageLi.click(function(){
					to_page(result.extend.pageInfo.pages);
				});
			}
			ul.append(firstPageLi).append(prePageLi);
			/* 遍历页码 */
			$.each(result.extend.pageInfo.navigatepageNums,function(index,item){
				var numLi = $("<li></li>").append($("<a></a>").append(item));
				if(result.extend.pageInfo.pageNum == item){
					numLi.addClass("active");
				}
				numLi.click(function(){
					to_page(item);
				});
				ul.append(numLi);
			});
			ul.append(nextPageLi).append(lastPageLi);
			var navEle = $("<nav></nav>").append(ul);
			navEle.appendTo("#page_nav_area");
		}
		
		/* 清空表单样式及内容 */
		function reset_form(ele){
			/* 清空内容 因为ajax没有reset清空表单的方法，因此通过获取dom对象然后调用dom对象的reset()方法 清空表单数据 */
			$(ele)[0].reset();
			/* 清空样式 */
			/* 查找表单的所有元素 清除带有指定class的属性  */
			$(ele).find("*").removeClass("has-error has-success");
			/* 查找用于提示的span元素   清空其内容  */
			$(ele).find(".help-block").text("");
		}
		
		/* 点击新增按钮弹出添加员工模态框 */
		$("#emp_add_modal_btn").click(function(){
			/* 清空表单数据及样式  */
			reset_form("#empAddModal form");
					
			
			/* 点击新增按钮 发送ajax请求 查询部门信息 填充下拉列表 */	
			getDepts($("#dept_add_select"));
			
			/* 弹出模态框  */
			$('#empAddModal').modal({backdrop:"static"});
			
		});
		
		/* 查询部门信息的 ajax请求 显示在下拉列表中 */
		function getDepts(ele){
			$(ele).empty();
			$.ajax({
				url:"${APP_PATH}/depts.do",
				type:"GET",
				success:function(result){
					/* console.log(result); */
					/* 显示部门信息 */
					var deptAdd = $("#dept_add_select");
					$.each(result.extend.depts,function(){
						var optionEle = $("<option></option>").append(this.deptName).attr("value",this.deptId);
						optionEle.appendTo(ele);
					});
					
				}
			});
			
		}
		
		/* 校验添加表单的数据  */
		function validate_add_form(){
			var empName = $("#empName_add_input").val();
			var regName = /(^[a-zA-Z0-9_-]{6,16}$)|(^[\u2E80-\u9FFF]{2,5})/;
			var email = $("#email_add_input").val();
			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			/* 校验用户名是否符合正则 */
			if(!regName.test(empName)){
				/* alert("用户名格式不正确"); */
				show_validate_msg("#empName_add_input","error","用户名格式不正确");
				/* $("#empName_add_input").parent().addClass("has-error");
				$("#empName_add_input").next("span").text("用户名格式不正确"); */
				return false;
			}else{
				show_validate_msg("#empName_add_input", "success", "");
			};
			/* 校验邮箱 */			
			if(!regEmail.test(email)){
				/* alert("邮箱格式不正确"); */
				show_validate_msg("#email_add_input","error","邮箱格式不正确");
				/* $("#email_add_input").parent().addClass("has-error");
				$("#email_add_input").next("span").text("邮箱格式不正确"); */
				return false;
			}else{
				show_validate_msg("#email_add_input", "success", "");
			}
			
			return true;
		}
		/* 表单失去焦点是校验 */
		$("#empName_add_input").blur(function(){
			
			validate_add_form();
		});
		
		$("#email_add_input").blur(function(){
			
			validate_add_form();
		});
		
		/* 抽取校验添加员工表单信息后的样式设置及消息设置 */
		function show_validate_msg(ele,status,msg){
			/* 清空元素之前的状态及消息 */
			$(ele).parent().removeClass("has-error has-success");
			$(ele).next("span").text("");
			/* 检验成功的样式和消息 */
			if("success" == status){
				$(ele).parent().addClass("has-success");
				$(ele).next("span").text(msg);
			}else if("error" == status){
				$(ele).parent().addClass("has-error");
				$(ele).next("span").text(msg);
			}
		}
		
		/* 校验表单新添加的用户名在数据库中是否存在 */
		$("#empName_add_input").change(function(){
			var empName = this.value;
			$.ajax({
				url:"${APP_PATH}/checkuser.do",
				type:"POST",
				data:"empName="+empName,
				success:function(result){
					if(result.code == 100){
						show_validate_msg("#empName_add_input","success","用户名可用");
						/* 给保存按钮添加一个属性 标记校验成功 */
						$("#emp_save_btn").attr("ajax-va","success");
					}else if(result.code ==200 ){
						show_validate_msg("#empName_add_input","error",result.extend.va_msg);
						/* 给保存按钮添加一个属性 标记校验成功 */
						$("#emp_save_btn").attr("ajax-va","error");
					}
				}
			});
			
		});
		
		/* 员工保存 */
		$("#emp_save_btn").click(function(){
			/* 前端jQuery校验表单数据  */
			if(!validate_add_form()){
				return false;
			}
			
			/* 判断校验用户名后  保存按钮的属性 */
			if($(this).attr("ajax-va") == "error"){
				return false;
			}
			
			/* 
				$("#empAddModal form").serialize():将表格中的数据序列化 jquery提供的方法
			*/
			$.ajax({
				url:"${APP_PATH}/emp.do",
				type:"POST",
				data:$("#empAddModal form").serialize(),
				success:function(result){
					/* 关闭模态框 基于bootstrap 的方法  */
					if(result.code == 100){
						
					$("#empAddModal").modal('hide');
					
					/* 跳转到最后一页  显示新添加的数据  */
					to_page(totalRecord);
					}else{
						if(undefined != result.extend.errorFields.email){
							show_validate_msg("#empName_add_input","success",result.extend.errorFields.email);
						}
						if(undefined != result.extend.errorFields.empName){
							show_validate_msg("#email_add_input","error",result.extend.errorFields.empName);
						}
					}
				}
			})
		});
		
		/* 点击编辑按钮  */
		/* 给页面加载后的元素绑定事件  */
		$(document).on("click",".edit_btn",function(){
			/* 点击编辑按钮 发送ajax请求 查询部门信息 填充下拉列表 */	
			getDepts($("#dept_update_select"));
			/* 发动获取员工信息的ajax请求  */
			getEmp($(this).attr("edit-id"));
			
			/* 将本次被编辑的员工的id 赋值到更新按钮上 以便更新时使用   */
			$("#emp_update_btn").attr("edit-id",$(this).attr("edit-id"));
			/* 弹出模态框  */
			$('#empUpdateModal').modal({backdrop:"static"});
		});
		
		/* 获取员工信息 并将员工信息赋值到模态框中  */
		function getEmp(id){
			$.ajax({
				url:"${APP_PATH}/emp.do",
				type:"GET",
				data:"id="+id,
				success:function(result){
					$("#empName_update_input").text(result.extend.emp.empName);
					$("#email_update_input").val(result.extend.emp.email);
					/* 选中单选框 赋值后会自动选中对应的单选框 */
					$("#empUpdateModal input[name=gender]").val([result.extend.emp.gender]);
					/* 选中下拉选  赋值后会自动选中对应的下拉选 */
					$("#empUpdateModal select").val([result.extend.emp.dId]);
				},
			});
		}
		
		/* 更新按钮绑定单击事件  */
		$("#emp_update_btn").click(function(){
			/* 校验邮箱合法性  */
			var email = $("#email_update_input").val();
			var regEmail = /^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
			/* 校验邮箱 */			
			if(!regEmail.test(email)){
				show_validate_msg("#email_update_input","error","邮箱格式不正确");
				return false;
			}else{
				show_validate_msg("#email_update_input", "success", "");
			}
			
			$.ajax({
				url:"${APP_PATH}/updateemp/",
				type:"POST",
				data:$("#empUpdateModal form").serialize()+"&empId="+$(this).attr("edit-id"),
				success:function(result){
					/* alert(result.msg); */
					//1、关闭对话框
					$("#empUpdateModal").modal("hide");
					//2、回到本页面
					to_page(currentPage);
				}
			});
		});
		
		/* 删除  */
		$(document).on("click",".delete_btn",function(){
			/* 获取点击的删除按钮所在行的员工姓名 
				通过获取删除按钮的祖先然后查找tr再查找第二个td
			*/
			var empName = $(this).parents("tr").find("td:eq(2)").text();
			if(confirm("确认删除【"+empName+"】")){
				del_emp($(this).attr("del-id"));
			}else{
				alert("删除失败");
			}
		});
		
		/* 抽取员工删除方法  */
		function del_emp(empId){
			$.ajax({
				url:"${APP_PATH}/deleteemp",
				data:"empId="+empId,
				type:"POST",
				success:function(result){
					alert(result.msg);
					to_page(currentPage);
				}
				
			});
		}
		
		/* 批量删除  */
		/* 全选按钮  */
		$("#check_all").click(function(){
			/* attr("fieldName"):获取自定义属性
				prop("fieldName"):获取原生自带的属性 
			*/
			//alert($(this).prop("checked"));
			/* 点击全选按钮后 选中本页的所有行  */
			$(".check_item").prop("checked",$(this).prop("checked"));
		});
		
		/* 选中本页所有行后 自动选中全选  */
		$(document).on("click",".check_item",function(){
			var flag = $(".check_item:checked").length == $(".check_item").length;
			$("#check_all").prop("checked",flag);
		});
		
		/* 点击全部删除按钮时 删除页面被选中行  */
		$("#emp_delete_all_btn").click(function(){
			var empNames = "";
			var del_idstr = "";
			$.each($(".check_item:checked"),function(){
				empNames += $(this).parents("tr").find("td:eq(2)").text()+",";
				del_idstr += $(this).parents("tr").find("td:eq(1)").text()+"-";
			});
			/* 去除empNames字符串多余的逗号  */
			empNames = empNames.substring(0,empNames.length-1);
			/* 去除del_idstr字符串多余的逗号  */
			del_idstr = del_idstr.substring(0,del_idstr.length-1);
			if(confirm("确认删除【"+ empNames +"】吗？")){
				//alert(del_idstr);
				/* 发动ajax请求  */
				del_emp(del_idstr)
			}else{
				alert("false");
			}
		});
		//可以  通过 <a> 标签跳转
		//也可以通过 window.location.href跳转 
		//之所以通过ajax然后再跳转可以进行一些数据验证比如登录验证
		$("#emp_import_btn").click(function(){
			/* alert("emp_import_btn"); */
			$.ajax({
				url:"${APP_PATH}/toImport",
				type:"GET",
				success:function(){
					window.location.href="toImport"
				}
			});
		});
	</script>

</body>
</html>